
<template>
	<view class="page-content">
		<card2 v-if="OBJDate != null" :title="'湿地植被动态监测'" class="m-card">
			<view class="m-card-content f-content">
				<image class="img" src="@/static/mapMonitor/hdxf.png" mode="widthFix"></image>
				<view class="flex items">
					<view class="item borders">
						<view class="title">水域增长面积</view>
						<view class="value">
							<text>{{ 999 }}</text>
							m²
						</view>
					</view>
					<view class="item borders">
						<view class="title">流域面积</view>
						<view class="value">
							<text>{{ 9999 }}</text>
							m²
						</view>
					</view>
				</view>
				<view class="charts-box">
					<view class="flex charts-title">
						<view class="flex-item title">近{{ OBJDate.sdly.x.length }}年动态变化</view>
						<view class="unit">单位：m²</view>
					</view>
					<view class="charts-box"><canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas></view>
					<!-- <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas> -->
				</view>
			</view>
		</card2>
		<card2 title="湿地生物多样性监测" v-if="wetlandBiology != null" class="m-card">
			<view class="m-card-content p-content">
				<image class="img" src="@/static/mapMonitor/sw.png" mode="widthFix"></image>
				<view class="items">
					<view class="item" v-for="(item, index) in wetlandBiology" :key="index">
						<view class="title">{{ item.KEY }}</view>
						<view class="value">
							<text>{{ item.VALUE }}</text>
							{{ item.UNIT }}
						</view>
					</view>
				</view>
			</view>
		</card2>
		<card2 title="水质动态监测" v-if="waterQualityTrends != null" class="m-card">
			<view class="m-card-content r-content">
				<image class="img" src="@/static/mapMonitor/sz.png" mode="widthFix"></image>
				<view class="items">
					<view class="flex flex-middle item" v-for="(item, index) in waterQualityTrends" :key="index">
						<view class="flex-item title">{{ item.KEY }}</view>
						<view class="value">
							<text>{{ item.INTRODUCE }} {{ item.UNIT == '/' ? '' : item.UNIT }}</text>
						</view>
					</view>
				</view>
			</view>
		</card2>
		<card2 title="湿地盐碱化动态监测" v-if="salinizationOfWetland != null" class="m-card">
			<view class="m-card-content f-content">
				<image class="img" src="@/static/mapMonitor/sd.png" mode="widthFix"></image>
				<view class="flex items">
					<view class="item borders" v-for="(item, index) in salinizationOfWetland" :key="index">
						<view class="title">{{ item.KEY }}</view>
						<view class="value">
							<text>{{ item.VALUE }}</text>
							{{ item.UNIT }}
						</view>
					</view>
				</view>
				<view class="charts-box">
					<view class="flex charts-title">
						<view class="flex-item title">近{{ OBJDate.sdyjhbbh.x.length }}年动态变化</view>
						<view class="unit">单位：%</view>
					</view>
					<canvas canvas-id="canvasLineB" id="canvasLine" class="charts" @touchstart="touchLineB"></canvas>
				</view>
			</view>
		</card2>
		<card2 title="湿地鸟类活动数量分析" v-if="birds != null" class="m-card">
			<view class="m-card-content f-content">
				<image class="img" src="@/static/mapMonitor/nl.png" mode="widthFix"></image>
				<view class="flex items">
					<view class="item borders" v-for="(item, index) in birds" :key="index">
						<view class="title">{{ item.KEY }}</view>
						<view class="value">
							<text>{{ item.VALUE }}</text>
							{{ item.UNIT }}
						</view>
					</view>
				</view>
			</view>
		</card2>
		<card2 title="湿地蓝藻爆发预警" v-if="wetland != null" class="m-card">
			<view class="m-card-content r-content">
				<image class="img" src="@/static/mapMonitor/lz.png" mode="widthFix"></image>
				<view class="items">
					<view class="flex flex-middle item" v-for="(item, index) in wetland" :key="index">
						<view class="flex-item title">{{ item.KEY }}</view>
						<view class="value">
							<text>{{ item.VALUE }}</text>
						</view>
					</view>
				</view>
			</view>
		</card2>
		<card2 title="湿地生态保护规划" class="m-card" v-if="WetlandEcology != null">
			<view class="m-card-content r-content">
				<image class="img" src="@/static/mapMonitor/hdxf.png" mode="widthFix"></image>
				<view class="items">
					<view class="flex flex-middle item">
						<view class="flex-item title">待修复区名称</view>
						<view class="value">
							<picker @change="bindPickerChange" :value="WetlandEcologyIndex" :range="WetlandEcology" range-key="name">
								<view class="uni-input">{{ WetlandEcology[WetlandEcologyIndex].name }}</view>
							</picker>
						</view>
					</view>
					<view class="flex flex-middle item" v-for="(item, index) in WetlandEcology[WetlandEcologyIndex].value" :key="index">
						<view class="flex-item title">{{ index }}</view>
						<view class="value hexagon" :class="[planName[item]]" v-if="index == '修复效果评价'">
							<view class="text">{{ item }}</view>
						</view>
						<view v-else class="value">
							<text>{{ item }}</text>
						</view>
					</view>
				</view>
			</view>
		</card2>
	</view>
</template>

<script>
import card2 from '@/components/card/card2.vue';
import uCharts from '@/components/u-charts/u-charts.js';
let _self, canvaLineA, canvaLineB;
export default {
	data() {
		return {
			OBJDate: null,
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			date: '2021-02-24',
			startDate: '2021-01-01',
			endDate: '2022-01-01',
			array: [],
			WetlandEcologyIndex: 0,
			dataResource: '',
			planData: '',
			vegetationData: '',
			salinizationData: '',
			vegetationChartData: '',
			planName: {
				优: 'excellent',
				良: 'good',
				中: 'in',
				差: 'difference'
			}
		};
	},
	computed: {
		wetland: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				value = OBJDate.sdlzbfyj;
			}
			return value;
		},
		wetlandBiology: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				value = OBJDate.swdyx;
			}
			return value;
		},
		waterQualityTrends: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				value = OBJDate.szdtjc;
			}
			return value;
		},
		salinizationOfWetland: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				value = OBJDate.sdyjhjc;
			}
			return value;
		},
		birds: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				value = OBJDate.nlhdslfx;
			}
			return value;
		},
		wetland: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				value = OBJDate.sdlzbfyj;
			}
			return value;
		},
		WetlandEcology: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				value = [];
				let allList = [];
				let nameList = OBJDate.sdstbhgh.option;
				let list = OBJDate.sdstbhgh.data;
				for (var i = 0, len = nameList.length; i < len; i++) {
					allList.splice(
						i,
						0,
						list.filter(item => {
							return item.NAME === nameList[i].name;
						})
					);
				}
				for (let i = 0, len = allList.length; i < len; i++) {
					let VALUES = {};
					for (let j = 0; j < allList[i].length; j++) {
						VALUES[allList[i][j].KEY] = allList[i][j].INTRODUCE;
					}
					value.splice(i, 0, {
						name: nameList[i].name,
						value: VALUES
					});
				}
			}
			return value;
		}
	},
	components: {
		card2
	},
	onLoad() {
		_self = this;
		this.cWidth = uni.upx2px(630);
		this.cHeight = uni.upx2px(370);
		this.getData();
	},
	methods: {
		getData() {
			this.$$.request(
				{
					url: this.config.getedwMessage,
					method: 'GET',
					data: {}
				},
				true,
				true
			)
				.then(res => {
					if (res.code == 2000) {
						this.OBJDate = res.data;
						this.vegetationCanvas(this.OBJDate.sdly);
						this.salinizationCanvas(this.OBJDate.sdyjhbbh);
					}
				})
				.catch(() => {
					console.log('请求失败');
				})
				.finally(() => {
					console.log('complate');
				});
		},
		bindDateChange: function(e) {
			this.date = e.target.value;
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.WetlandEcologyIndex = e.target.value;
		},
		setLineOption(data) {
			let option = {
				categories: [],
				series: [
					{
						name: '',
						data: [],
						color: '#F39800'
					}
				]
			};
			option.categories = data.x;
			option.series[0].data = data.data;

			return option;
		},
		setDefaultOption(canvasId, chartData) {
			let opts = {
				$this: _self,
				canvasId: canvasId,
				type: 'area',
				fontSize: 11,
				// padding: [0, 15, 10, 15],
				legend: {
					show: false,
					position: 'top',
					float: 'center',
					itemGap: 30,
					padding: 5,
					lineHeight: 18,
					margin: 0
				},
				dataLabel: false,
				dataPointShape: true,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				xAxis: {
					disableGrid: true,
					type: 'grid',
					gridColor: '#CCCCCC',
					gridType: 'dash',
					dashLength: 8
				},
				yAxis: {
					gridType: 'solid',
					gridColor: '#E5E5E5',
					dashLength: 8,
					splitNumber: 5
				},
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					area: {
						type: 'curve',
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: false
					},
					tooltip: {
						showBox: true
					}
				}
			};
			return opts;
		},
		showLineA(canvasId, chartData) {
			let opt = this.setDefaultOption(canvasId, chartData);
			canvaLineA = new uCharts(opt);
		},
		touchLineA(e) {
			canvaLineA.showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data;
				}
			});
		},
		showLineB(canvasId, chartData) {
			let opt = this.setDefaultOption(canvasId, chartData);
			canvaLineB = new uCharts(opt);
		},
		touchLineB(e) {
			canvaLineB.showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data;
				}
			});
		},
		vegetationCanvas(data) {
			if (data != null) {
				let opts = this.setLineOption(data);
				this.showLineA('canvasLineA', opts);
			}
		},
		salinizationCanvas(data) {
			if (data != null) {
				let opts = this.setLineOption(data);
				this.showLineA('canvasLineB', opts);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/css/asd.scss';
// page {
// 	background: #F4F4F4;
// }

.charts-box {
	.charts-title {
		padding: 30rpx 0 10rpx;
		font-size: 24rpx;

		.title {
			color: #333;
		}

		.unit {
			color: #999;
		}
	}
}

.charts {
	width: 630rpx;
	height: 370rpx;
	background-color: #ffffff;
}

.page-content {
	// padding: 30rpx;
}

.m-card {
	margin-bottom: 20rpx;
	.m-card-content {
		.img {
			display: block;
			margin: 0 auto;
			width: 200rpx;
			height: 140rpx;
		}
	}

	.p-content {
		position: relative;
		padding: 80rpx 0 125rpx;
		margin: -30rpx 0 -30rpx;

		.img {
			width: 292rpx;
		}

		.items {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.item {
			width: 34%;
			margin-top: 40rpx;

			&:nth-child(even) {
				.title,
				.value {
					padding-left: 60rpx;
				}
			}

			&:nth-child(odd) {
				padding-left: 30rpx;
			}
		}

		.title {
			font-size: 28rpx;
			color: #333;
		}

		.value {
			font-size: 28rpx;
			color: #999;

			text {
				font-size: 36rpx;
				margin-right: 11rpx;
				color: #00a0e9;
			}
		}
	}

	.r-content {
		position: relative;

		.grade {
			position: absolute;
			top: 10rpx;
			left: 50%;
			font-size: 60rpx;
			color: #00dcb0;
			transform: translateX(-50%);
		}

		.flex {
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			height: 70rpx;
			background: #f8f8f8;
			border-radius: 35rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.title {
				font-size: 28rpx;
				color: #333;
			}

			.value {
				font-size: 28rpx;
				color: #999;
				font-weight: 700;
				text {
					font-size: 30rpx;
				}
			}

			.uni-input::after {
				font-family: iconfont;
				content: '\e659';
				margin-left: 10rpx;
				font-size: 24rpx;
			}
		}
	}

	.f-content {
		.items {
			justify-content: space-between;
			margin: 0 -7rpx;
		}

		.item {
			flex: 1;
			margin: 0 7rpx;
			height: 120rpx;
			padding-top: 25rpx;
			text-align: center;
		}

		.title {
			margin-bottom: 10rpx;
			font-size: 28rpx;
			color: #333;
		}

		.value {
			font-size: 28rpx;
			color: #999;
			text {
				font-size: 36rpx;
				color: #00a0e9;
			}
		}
	}

	.v-content {
		.video {
			margin-bottom: 40rpx;
			width: 100%;
			height: auto;
		}

		.title {
			font-size: 28rpx;
			color: #333;
		}

		.tips {
			font-size: 30rpx;
			color: #787c90;
		}

		.title-bar {
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			height: 70rpx;
			background: #f8f8f8;
			border-radius: 35rpx;
		}

		.content {
			padding: 20rpx 30rpx;
			background: #f8f8f8;
			border-radius: 6rpx;

			.title {
				margin-bottom: 10rpx;
			}
		}
	}
}
</style>
